<template>
  <div class="author-info">
    <div class="top">
      <img
        :src="authorData.imgUrl"
        alt=""
        draggable="false"
        @click="goToPersonal"
      />
      <div class="author-right">
        <div class="author-name">{{ authorData.username }}</div>
        <div class="author-intro">{{ authorData.intro }}</div>
        <div
          class="tags"
          v-if="authorData.userTags && authorData.userTags.length !== 0"
        >
          <el-tag effect="plain">{{ authorData.userTags[0] }}</el-tag>
          <el-tag effect="plain" v-if="authorData.userTags[1]">{{
            authorData.userTags[1]
          }}</el-tag>
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="item">
        <span>{{ authorData.postCount }}</span>
        <span>文章</span>
      </div>
      <div class="item">
        <span>{{ authorData.followersCount }}</span>
        <span>粉丝</span>
      </div>
    </div>
    <div
      class="bottom"
      v-if="parseInt(authorData.userId) !== parseInt(nowUserId)"
    >
      <el-button @click="followBtn" :type="isFollow ? '' : 'primary'">{{
        isFollow ? "取消关注" : "关注"
      }}</el-button>
    </div>
  </div>
</template>

<script>
import {
  getAuthorDataByPostId,
  getIsFollow,
  cancelFollow,
  Follow,
} from "../../../api/post";
import { getUserId } from "../../../utils/auth";
export default {
  props: {
    postId: {
      type: Number,
      default: null,
    },
  },
  data() {
    return {
      // 是否已经关注
      isFollow: null,
      authorData: {}, // 作者信息
      nowUserId: getUserId(), // 当前登录账户的userId
    };
  },
  methods: {
    // 去个人主页
    goToPersonal() {
      const routePath = this.$router.resolve({
        name: "personal",
        params: {
          personalId: this.authorData.userId,
          personalName: this.authorData.username,
        },
      }).href;
      window.open(routePath, "_blank");
    },
    // 获取作者信息
    getAuthorData() {
      getAuthorDataByPostId(this.postId).then((res) => {
        if (res.data.code === 1) {
          this.authorData = res.data.data;
          if (parseInt(this.authorData.userId) !== parseInt(this.nowUserId)) {
            this.getIsFollow();
          }
        } else {
          this.$message.error("网络错误");
        }
      });
    },
    // 查看当前登录用户是否关注了文章作者
    getIsFollow() {
      getIsFollow(this.nowUserId, this.authorData.userId).then((res) => {
        if (res.data.code === 1) {
          this.isFollow = res.data.data.isFollow;
        } else {
          this.$message.error("网络错误");
        }
      });
    },
    // 关注按钮
    followBtn() {
      if (this.isFollow) {
        // 已经关注则发送取消关注请求
        cancelFollow(this.nowUserId, this.authorData.userId).then((res) => {
          if (res.data.code === 1) {
            this.$notify({
              title: "成功",
              message: "取消关注成功",
              type: "success",
            });
            this.isFollow = false;
          } else {
            this.$message.error("网络错误");
          }
        });
      } else {
        // 未关注则发送关注请求
        Follow(this.nowUserId, this.authorData.userId).then((res) => {
          if (res.data.code === 1) {
            this.$notify({
              title: "成功",
              message: "关注成功",
              type: "success",
            });
            this.isFollow = true;
          } else {
            this.$message.error("网络错误");
          }
        });
      }
    },
  },
  mounted() {
    this.getAuthorData();
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.author-info {
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  //   height: 165px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .top {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    img {
      cursor: pointer;
      border-radius: 50%;
      width: 75px;
      height: 75px;
      user-select: none;
    }
    .author-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
      // 禁止换行
      white-space: nowrap;
      overflow: hidden;
      .author-intro {
        // 禁止换行
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        color: #515767;
      }
      .tags {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        .el-tag {
          padding: 0 5px !important;
          height: 15px !important;
          line-height: 15px !important;
          border-radius: 0 !important;
          font-size: 10px !important;
        }
      }
      .articles-fans {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
      }
    }
  }
  .middle {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 10px;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      // 第一个span
      span:first-child {
        font-size: 16px;
        color: #252933;
      }
      // 第二个span
      span:last-child {
        font-size: 12px;
        color: #515767;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    .el-button {
      width: 100% !important;
    }
  }
}
</style>